<template>
	<view class="companyWrapper">
		<Skeleton v-if="skeletonLoading" type="detail"></Skeleton>
		<Head title="企业详情" type="detail" pathType="company" :isBack="false"></Head>
		<view class="company" ref="company" :style="{'padding-bottom': paddingBottom + 'px'}">
			<view class="baseInfo">
				<!-- 最多展示25个字 -->
				<view class="companyName substring2">
					<text>{{base_info.companyname_slice ? base_info.companyname_slice : base_info.companyname}}</text>
					<text class="auth" v-if="base_info.audit == 1">认证</text>
					<image class="icon" v-if="base_info.setmeal_icon" :src="base_info.setmeal_icon"></image>
				</view>
				<view class="substring other">
					<!-- {{base_info.trade_text}}{{base_info.scale_text}}{{base_info.nature_text}} -->
					<text class="item" v-if="base_info.trade_text != ''">{{base_info.trade_text}}</text>
					<text class="item" v-if="base_info.scale_text != ''">{{base_info.scale_text}}</text>
					<text class="item" v-if="base_info.nature_text != ''">{{base_info.nature_text}}</text>
				</view>
				<view class="companyImg">
					<image :src="base_info.logo_src"></image>
				</view>
			</view>
			<view class="tag" v-if=" report == 1 || base_info.tag_text_arr&&base_info.tag_text_arr.length>0">
				<view class="item ac" v-if="report == 1">实地认证</view>
				<view class="item" v-for="(item,index) in base_info.tag_text_arr">{{item}}</view>
			</view>
			<!-- 统计 -->
			<view class="count">
				<view class="item w1">
					<view class="label">企业简历查看率:</view>
					<view class="value">{{ companySupplementary.watch_percent }}</view>
				</view>
				<view class="item w2">
					<view class="label">最近登录:</view>
					<view class="value">{{companySupplementary.last_login_time}}</view>
				</view>
			</view>
			<!-- 统计 -->

			<!-- 企业视频 -->
			<!-- <view class="video" v-if="videoList.length>0">
				<view class="publicTitle">
					企业视频
				</view>
				<view class="videoList">
					<swiper class="swiper" :current="currentSwiperIdx" @change="handleSwiperChange">
						<swiper-item v-for="(item,index) in videoList" :key="item.id">
							<view class="imgtwo">
								<image :src="item.video_src+'?vframe/jpg/offset/0'" mode="aspectFill"></image>
							</view>
						</swiper-item>
					</swiper>

					<view class="left-back" @click.stop="leftImg">
						<u-icon name="arrow-left" color="#FFFFFF"></u-icon>
					</view>
					<view class="right-forword" @click.stop="rightImg">
						<u-icon name="arrow-right" color="#FFFFFF"></u-icon>
					</view>
				</view>
			</view> -->
			<!-- 企业视频 -->

			<!-- 公司介绍 -->
			<view class="companyDes" v-if="base_info.content !=''">
				<view class="publicTitle">
					公司介绍
				</view>
				<view class="readMore">
					<!-- #7CA7FF -->
					<!-- #ifdef MP-TOUTIAO || MP-ALIPAY -->
					<u-read-more @open="readMoreOpen" @close="readMoreClose" color="#7CA7FF" ref="uReadMore"
						show-height="164" :shadow-style="readMoreShadowStyle" text-indent="0" close-text="查看全部"
						:toggle="true">
						<u-parse :html="base_info.content" @load="parseLoaded"></u-parse>
					</u-read-more>
					<!-- #endif -->
					<!-- #ifdef  MP-WEIXIN -->
					<u-read-more @open="readMoreOpen" @close="readMoreClose" color="#7CA7FF" ref="uReadMore"
						show-height="160" :shadow-style="readMoreShadowStyle" text-indent="0" close-text="查看全部"
						:toggle="true">
						<u-parse :html="base_info.content" @load="parseLoaded"></u-parse>
					</u-read-more>
					<!-- #endif -->
				</view>
			</view>
			<!-- 公司介绍 -->
			<!-- 公司地址 -->
			<view class="companyAddress" v-if="base_info.address != ''">
				<view class="publicTitle">
					工作地址
				</view>
				<view class="addressInfo" @click="locationToBdmap">
					<view class="address">{{base_info.address}}</view>
					<view class="map" v-if="(base_info.map_lat * 1) || (base_info.map_lng * 1)">
						<view class="mapCenter">
							<view class="text substring">{{base_info.companyname}}</view>
							<view class="icon"></view>
						</view>
					</view>
					<view class="distance" v-if="(base_info.map_lat * 1) || (base_info.map_lng * 1)">
						<view><text class="leftText" v-show="distance !=''">距离你{{distance}}</text></view>
						<view class="rightText">到这里去</view>
					</view>
				</view>
			</view>
			<!-- 公司地址 -->

			<!-- 企业风采 -->
			<view class="companyImg2" v-if="img_list&&img_list.length > 0">
				<view class="publicTitle">
					企业风采
				</view>
				<view class="imgList">
					<view class="img" v-for="(item,index) in img_list" :key="index">
						<image :src="item.img_src" mode="aspectFill" @click="previewImg(index)"></image>
					</view>
				</view>
			</view>
			<!-- 企业风采 -->
		</view>

		<Rightnav :isTop="isTop" :has_fav="has_attention" @doFav="doAttention" @handleOpenShare="handleOpenShare">
		</Rightnav>
		<!-- <view :class="isRigthNav ? 'rightNav' : 'rightNav ac'">
			<view :class="has_attention == 1 ? 'btn collect_ac ' : 'btn collect'" @click="doAttention"></view>
			<view class="btn share" @click="handleOpenShare"></view>
			<view class="btn top" v-if="isTop" @click="goTop"></view>
		</view> -->
		<!-- 分享 -->
		<SharePoster v-if="showPoster" @closePoster="closePoster" :type="'company'" :infoid="shareid"></SharePoster>
		<Share ref="share" @handleCopy="handlerCopy" @handleCreateBill="handleCreateBill"></Share>
		<!-- 分享 -->
		<!-- 登录弹窗 -->
		<LoginPopup ref="LoginPopup" :single_login="true" :utype="2" :after_login_data="after_login_data"
			:redirect="'/commonViews/CompanyShow?id=' + query_id" @phoneNumberLogin="phoneNumberLogin"></LoginPopup>
		<!-- 登录弹窗 -->
		<TopTips ref="TopTips"></TopTips>
		<!-- 职位弹窗 -->
		<view :class="isJobList ? 'jobPopup ac' : 'jobPopup'" :style="{transform:'translateY('+jobPopupHeigth+'px)'}">
			<!-- #ifdef MP-TOUTIAO || MP-WEIXIN -->
			<view :class="isJobList ? 'expand bottom' : 'expand top' " @click="isJobList=!isJobList"></view>
			<!-- #endif -->
			<view class="jobMask" v-show="isJobList" @click="isJobList=!isJobList"></view>
			<view class="main">
				<view class="jobPopupTitle" @click="isJobList=!isJobList">
					<view class="leftText">
						<text class="color1">在招</text>
						<text class="color2">职位</text>
					</view>
					<!-- #ifdef MP-TOUTIAO || MP-WEIXIN -->
					<view class="rigthText">
						{{!isJobList ? '在招'+ jobnum +'个职位' :'点击收起全部职位'}}
						<!-- 在招{{joblist.length}}个职位 -->
					</view>
					<!-- #endif -->
				</view>
				<view class="jobPopupList">
					<scroll-view scroll-y="true" style="height: calc(100vh - 400rpx);" @scrolltolower="scrolltolower">
						<view v-if="joblist&&joblist.length>0" style="padding: 0 30rpx;">
							<jobItem v-for="(item,index) in joblist" :key="item.id" :item="item" @toDetail="toDetail">
							</jobItem>
							<u-loadmore v-if="isLoadmore" class="u-loadmore" :status="finished_status"></u-loadmore>
						</view>
						<Empty v-else></Empty>
					</scroll-view>
				</view>
			</view>
		</view>
		<!-- 职位弹窗 -->

		<!-- 未授权弹窗 -->
		<Popup ref="authPopup" @confirm="handleAuthConfirm">
			<view style="padding:20rpx 0;">{{auth.text}}</view>
		</Popup>
	</view>
</template>

<script>
	import {
		countDistance
	} from '@/utils/index'
	import http from '@/utils/http'
	import api from '@/api'
	import LoginPopup from '@/components/LoginPopup.vue'
	import Share from '@/components/share/Share'
	import SharePoster from '@/components/share/SharePoster'
	import jobItem from '@/components/listItem/jobItem.vue'
	import {
		DbToGc
	} from '@/utils/map.js'
	import Skeleton from '@/components/Skeleton.vue'
	import {
		onShareAppMessage,
		onShareTimeline
	} from '@/utils/share.js'
	import {
		changeIsAuth
	} from '@/utils/uni.js'
	import Rightnav from './components/rightNav.vue'
	export default {
		name: 'CompanyShow',
		components: {
			Share,
			SharePoster,
			LoginPopup,
			jobItem,
			Skeleton,
			Rightnav
		},
		data() {
			return {
				skeletonLoading: true,
				paddingBottom: 0,
				jobPopupHeigth: 0,
				currentSwiperIdx: 0,
				videoList: [],
				companySupplementary: {},
				isJobList: false,
				isRigthNav: true,
				isTop: false,
				readMoreShadowStyle: {
					backgroundImage: "none",
					paddingTop: "12rpx"
				},
				isLoadmore: false,
				finished_status: 'loadmore',
				query_id: '',
				page: 1,
				pagesize: 10,
				is_personal_login: false,
				base_info: {},
				img_list: [],
				field_rule: {
					basic: {},
					contact: {},
					info: {}
				},
				report: 0,
				fans: 0,
				watch_percent: '',
				has_attention: 0,
				joblist: [],
				distance: '',
				current_lat: 0,
				current_lng: 0,
				shareid: 0,
				showPoster: false,
				jobnum: 0,
				after_login_data: {},
				selectArrOnload: [],
				options: {},
				UNILocation: {},
				auth: {
					text: '',
					authText: '',
					isAuth: ''
				},
				previewImgList:[]
			}
		},
		onShareAppMessage() {
			let wechatShareInfo = {
				companyname: this.base_info.companyname,
				district: this.base_info.district_text,
				nature: this.base_info.nature_text,
				trade: this.base_info.trade_text,
				imgUrl: this.base_info.logo_src,
			};
			return onShareAppMessage({
				url: '/commonViews/CompanyShow?id=' + this.query_id,
				alias: "companyshow",
				info: wechatShareInfo
			})
		},
		onShareTimeline() {
			let wechatShareInfo = {
				companyname: this.base_info.companyname,
				district: this.base_info.district_text,
				nature: this.base_info.nature_text,
				trade: this.base_info.trade_text,
				imgUrl: this.base_info.logo_src,
			};
			return onShareTimeline({
				url: '/commonViews/CompanyShow?id=' + this.query_id,
				alias: "companyshow",
				info: wechatShareInfo
			})
		},
		onLoad(options) {
			//获取扫描小程序二维码路径参数
			const scene = decodeURIComponent(options.scene)
			const scene_id = scene.substring(scene.indexOf("=") + 1)
			this.query_id = options.id
			if (options.scene) {
				this.query_id = scene_id
			}
			this.is_personal_login = !!(this.$store.state.LoginOrNot === true && this.$store.state.LoginType === 2)
			this.options = options
		},
		onShow() {
			if (this.options.method) {
				this.fetchData(this.options.method)
			} else {
				this.fetchData()
			}
			// this.changeIsAuth()
			// this.isNavTime()
			this.getCompanySupplementary()
			this.getVideoList()
		},
		onPageScroll(res) {
			uni.$emit('onPageScroll', res.scrollTop)
			// this.isRigthNav = true  
			if (res.scrollTop > 100) {
				this.isTop = true
			} else {
				this.isTop = false
			}
			// if (this.isRigthNav) {
			// clearInterval(this.time);
			// this.isNavTime()
			// }
		},
		methods: {
			previewImg(index){
				uni.previewImage({
					urls: this.previewImgList,
					indicator: 'number',
					current: index
				})
			},
			handleAuthConfirm() {
				var {
					authText,
					isAuth
				} = this.auth
				if (authText == 'gps') {
					this.$refs.authPopup.close()
					// this.changeIsAuth()
				} else if (authText == 'setting') {
					uni.openSetting({
						success: (res) => {}
					})
				}
			},
			async changeIsAuth() {
				let {
					auth,
					isAuth,
					isGps,
					location
				} = await changeIsAuth('location')
				// if(!isGps){
				// 	//gps权限没有开启 提示用户开启权限
				// 	this.auth.text = '请打开定位服务功能'
				// 	this.auth.authText = 'gps'
				// 	this.auth.isAuth = isGps
				// 	this.$refs.authPopup.open()
				// } else {

				// }
				this.UNILocation = location
				// if (this.options.method) {
				// 	this.fetchData(this.options.method)
				// } else {
				// 	this.fetchData()
				// }
			},
			toDetail(id) {
				let selectArr = uni.getStorageSync('selectArr')
				selectArr = selectArr == 'null' || selectArr == null || selectArr == '' ? [] : JSON.parse(selectArr)
				if (selectArr.indexOf(id) == -1 || selectArr.length == 0) {
					selectArr.push(id)
				}
				this.selectArrOnload = selectArr
				uni.setStorageSync('selectArr', JSON.stringify(selectArr))
				for (let i in this.jobList) {
					if (this.joblist[i].id == id) {
						this.joblist[i].clicked = true
					}
				}
				uni.navigateTo({
					url: '/commonViews/JobShow?id=' + id
				})
			},
			phoneNumberLogin() {
				this.is_personal_login = !!(this.$store.state.LoginOrNot === true && this.$store.state.LoginType === 2)
				setTimeout(() => {
					this.fetchData(this.after_login_data.method)
				}, 1000)
			},
			readMoreOpen() {
				this.getDomInfo()
			},
			readMoreClose() {
				this.getDomInfo()
			},
			handleSwiperChange(e) {
				this.currentSwiperIdx = e.detail.current
			},
			leftImg() {
				let num = this.videoList.length - 1
				if (this.currentSwiperIdx <= 0) {
					this.currentSwiperIdx = num
				} else {
					this.currentSwiperIdx--
				}
			},
			rightImg() {
				let num = this.videoList.length - 1
				if (this.currentSwiperIdx >= num) {
					this.currentSwiperIdx = 0
				} else {
					this.currentSwiperIdx++
				}
			},
			// 企业资料补充
			getCompanySupplementary() {
				http
					.get(api.companySupplementary, {
						id: this.query_id
					})
					.then((res) => {
						if (res.data.code == 200) {
							this.companySupplementary = res.data.data
						}
					})
					.catch(() => {});
			},
			// 右侧导航5秒后消失
			isNavTime() {
				this.time = setTimeout(() => {
					this.isRigthNav = false
				}, 5000)
			},
			// 返回顶部
			goTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			// 分享弹窗开启
			handleOpenShare() {
				this.$refs.share.open()
			},
			// 生成海报弹窗开启
			handleCreateBill() {
				this.showPoster = !this.showPoster
			},
			// 生成海报弹窗关闭  
			closePoster() {
				this.showPoster = !this.showPoster
			},
			// 公司介绍初始化
			parseLoaded() {
				this.$nextTick(() => {
					this.$refs.uReadMore.init();
				})
			},
			// 获取用户当前位置 并计算两个坐标点之间的距离
			getPosition(mapLat, mapLng) {
				let that = this
				var localtion = DbToGc(this.UNILocation.latitude, this.UNILocation.longitude)
				this.current_lat = localtion.lat
				this.current_lng = localtion.lng
				if (this.current_lat * 1 > 0 && this.current_lng * 1 > 0 && mapLat * 1 > 0 && mapLng * 1 > 0) {
					this.distance = countDistance(
						this.current_lat,
						this.current_lng,
						mapLat,
						mapLng
					)
				}
			},
			// 获取职位列表
			getJoblist() {
				http
					.get(api.joblist, {
						company_id: this.query_id,
						pagesize: this.pagesize,
						count_total: 1
					})
					.then(res => {
						this.page++
						this.joblist = [...res.data.data.items]
						// 判断用户是否点击查看过某些数据
						if (this.selectArrOnload.length > 0) {
							for (let j in this.selectArrOnload) {
								for (let i in this.joblist) {
									if (this.joblist[i].id == this.selectArrOnload[j]) {
										this.joblist[i].clicked = true
									} else {
										this.joblist[i].clicked = false
									}
								}
							}
						} else {
							for (let i in this.joblist) {
								this.joblist[i].clicked = false
							}
						}
						this.jobnum = res.data.data.total
					})
					.catch(() => {})
			},
			// 获取企业数据
			async fetchData(next_method = null) {
				const params = {
					id: this.query_id
				}
				let res = await http.get(api.companyshow, params)
				const {
					base_info,
					field_rule,
					img_list,
					report,
					fans,
					watch_percent,
					has_attention
				} = {
					...res.data.data
				}

				this.field_rule = field_rule
				this.base_info = base_info
				if (base_info.companyname.length > 25) {
					base_info.companyname_slice = base_info.companyname.slice(0, 25)
				}
				img_list.forEach((item, index) => {
					item.image = item.img_src
				})
				this.img_list = img_list
				this.previewImgList = this.img_list.map(function(item) {
					return item.img_src
				})
				this.report = report
				this.fans = fans
				this.watch_percent = watch_percent
				this.has_attention = has_attention
				let wechatShareInfo = {
					companyname: base_info.companyname,
					district: base_info.district_text,
					nature: base_info.nature_text,
					trade: base_info.trade_text,
					imgUrl: base_info.logo_src
				}
				let newStr = base_info.content.replace(/\n/g, "<br/>")
				this.$set(this.base_info, 'content', newStr)
				if (this.UNILocation) {
					this.getPosition(this.base_info.map_lat, this.base_info.map_lng)
				}

				this.getJoblist()
				this.skeletonLoading = false
				// base_info.content
				// #ifdef MP-TOUTIAO || MP-WEIXIN
				this.$nextTick(() => {
					setTimeout(() => {
						this.getDomInfo()
					}, 300)
				})
				// #endif
				if (next_method !== null) {
					this[next_method]()
				}
			},
			handleNotPersonalTips() {
				if (this.$store.state.LoginType == 1 && !this.is_personal_login) {
					this.$refs.TopTips.show({
						title: '请登录求职者账号',
						type: 'error'
					})
					return false
				}
				return true
			},
			// 查看地图
			async locationToBdmap() {
				if (!(this.base_info.map_lat * 1) || !(this.base_info.map_lng * 1)) {
					return false
				}
				let map = DbToGc(this.base_info.map_lat * 1, this.base_info.map_lng * 1)

				let {
					auth,
					isAuth,
					isGps,
					location
				} = await changeIsAuth('location')
				if (!isGps) {
					//gps权限没有开启 提示用户开启权限
					this.auth.text = '请打开定位服务功能'
					this.auth.authText = 'gps'
					this.auth.isAuth = isGps
					this.$refs.authPopup.open()
				} else if (!isAuth) {
					this.auth.text = '请允许使用位置信息'
					this.auth.authText = 'setting'
					this.auth.isAuth = isAuth
					this.$refs.authPopup.open()
				} else {
					// #ifdef MP-TOUTIAO || MP-WEIXIN
					uni.openLocation({
						latitude: map.lat * 1,
						longitude: map.lng * 1,
						success: function(res) {},
						fail: function(err) {
							console.log(err)
						}
					})
					// #endif
					// #ifdef MP-ALIPAY
					my.openLocation({
						latitude: map.lat * 1,
						longitude: map.lng * 1,
						name: this.base_info.companyname,
						address: this.base_info.address,
						success: function(res) {},
						fail: function(err) {
							console.log(err)
						}
					})
					// #endif
				}
			},
			// 收藏
			doAttention() {
				if (this.is_personal_login === false) {
					if (this.handleNotPersonalTips()) {
						this.$refs.LoginPopup.open()
						this.after_login_data = {
							method: 'doAttention'
						}
					}
				} else {
					const params = {
						comid: this.query_id
					}
					let _api_url =
						this.has_attention === 1 ?
						api.company_attention_cancel :
						api.company_attention
					http
						.post(_api_url, params)
						.then(res => {
							this.$refs.TopTips.show({
								title: res.data.message,
								type: 'success'
							})
							this.has_attention = this.has_attention === 1 ? 0 : 1
						})
						.catch(() => {})
				}
			},
			// 获取视频列表
			getVideoList() {
				var params = {
					type: '1',
					comid: this.query_id,
					page: 1,
					pagesize: 15
				}
				http.get(api.shortvideo_videolist, params).then(res => {
					if (res.data.code == 200) {
						this.videoList = res.data.data
					}
				}).catch(() => {})
			},
			getDomInfo() {
				this.$nextTick(() => {
					var {
						windowHeight,
						statusBarHeight
					} = uni.getSystemInfoSync();
					console.log('windowHeight', windowHeight, 'statusBarHeight', statusBarHeight)
					// #ifdef MP-TOUTIAO || MP-WEIXIN
					const query = uni.createSelectorQuery().in(this)
					// #endif
					// #ifdef MP-ALIPAY
					const query = my.createSelectorQuery().in(this)
					// #endif
					this.jobPopupHeigth = 0
					query
						.select('.company')
						.boundingClientRect()
						.select(".jobPopup")
						.boundingClientRect()
						.exec(res => {
							console.log(res, 'res')
							var comDom = res[0]
							var jobDom = res[1]
							var jobShowHeight = jobDom.height - (jobDom.height * 0.9) + 10 // 展示最低高度
							const menuButton = uni.getMenuButtonBoundingClientRect() // 胶囊
							const navBarPadding = (menuButton.top - statusBarHeight) * 2
							let navHeight = menuButton.height + navBarPadding
							let headerHeight = navHeight + statusBarHeight
							if (comDom.height >= (windowHeight)) {
								// 固定在下方
								this.paddingBottom = jobShowHeight
								this.jobPopupHeigth = (jobDom.height * 0.9)
							} else {
								// 内容小于屏幕高度
								if (comDom.height < (windowHeight - jobShowHeight)) {
									this.paddingBottom = 0
									// #ifdef MP-TOUTIAO || MP-ALIPAY
									this.jobPopupHeigth = (comDom.height) - 80
									// #endif
									// #ifdef MP-WEIXIN
									this.jobPopupHeigth = (comDom.height) - 10
									// #endif
								} else {
									this.paddingBottom = jobShowHeight
									this.jobPopupHeigth = (jobDom.height * 0.9)
								}
							}
						});
				})
			},

			scrolltolower(e) {
				this.isLoadmore = true
				this.finished_status = 'loading'
				http.get(api.joblist, {
					company_id: this.query_id,
					page: this.page,
					pagesize: this.pagesize
				}).then(res => {
					for (let i = 0; i < res.data.data.items.length; i++) {
						let item = {
							...res.data.data.items[i]
						}
						if (this.page != 1) {
							this.joblist.push(item)
						}
					}
					this.page++
					// 数据全部加载完成
					if (res.data.data.items.length === 0) {
						this.finished_status = 'nomore'
					} else {
						this.finished_status = 'loading'
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.companyWrapper {
		background: #383943;
		min-height: 100vh;
		overflow: hidden;
	}

	.publicTitle {
		color: #FFFFFF;
		font-size: 34rpx;
		padding: 36rpx 0;
		font-weight: bold;
	}

	.other {
		position: relative;
		width: 560rpx;

		// padding:8rpx 0 14rpx;
		.item {
			position: relative;
			color: #999999;
			font-size: 24rpx;
			margin-right: 30rpx;

			&::before {
				content: '';
				position: absolute;
				right: -16rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 4rpx;
				height: 4rpx;
				border-radius: 50%;
				background: #999999;
			}

			&:last-child::before {
				display: none;
			}
		}
	}

	.company {
		padding: 50rpx 30rpx 0;

		.baseInfo {
			position: relative;
			margin-bottom: 40rpx;

			.companyName {
				width: 530rpx;
				color: #FFFFFF;
				font-size: 38rpx;
				margin-bottom: 26rpx;
				font-weight: bold;
				line-height: 54rpx;

				.auth {
					font-weight: normal;
					color: #18C373;
					font-size: 22rpx;
					background: #E9FFF5;
					border: 1rpx solid #18C373;
					border-radius: 6rpx;
					padding: 4rpx 10rpx;
					margin-left: 15rpx;
					display: inline-block;
					margin-top: -4rpx;
					line-height: 1;
					vertical-align: middle;
				}

				.icon {
					width: 40rpx;
					height: 40rpx;
					margin-left: 10rpx;
					vertical-align: middle;
					margin-top: -4rpx;
				}
			}

			.other {
				width: 560rpx;
				position: relative;

				.item {
					position: relative;
					color: #999999;
					font-size: 28rpx;
					margin-right: 30rpx;
					display: inline-block;

					&::before {
						content: '';
						width: 6rpx;
						height: 6rpx;
						background: #999999;
						position: absolute;
						right: -18rpx;
						top: 50%;
						transform: translateY(-50%);
						border-radius: 50%;
					}

					&:last-child {
						margin-right: 0;
					}

					&:last-child::before {
						display: none;
					}
				}
			}


			.companyImg {
				position: absolute;
				right: 0;
				top: 6rpx;
				width: 110rpx;
				height: 110rpx;
				border: 1rpx solid #F7F7F7;
				border-radius: 10rpx;
				box-sizing: border-box;
				overflow: hidden;

				image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
		}

		.tag {
			display: flex;
			// overflow: hidden;
			margin: 44rpx 0;
			overflow-x: auto;

			.item {
				flex-shrink: 0;
				margin-right: 12rpx;
				color: #FFFFFF;
				font-size: 26rpx;
				border: 1rpx solid #FFFFFF;
				border-radius: 4rpx;
				padding: 8rpx 24rpx;

				&.ac {
					color: #FC6502;
					border: 1rpx solid #FC6502;
				}
			}
		}

		.count {
			display: flex;
			align-items: center;
			background: url('../static/img/detail/count2.png') no-repeat center center;
			background-size: 100% 100%;
			height: 82rpx;
			padding: 0 30rpx;

			.item {
				display: flex;
				flex: 0 0 46%;
				font-size: 28rpx;

				.label {
					color: #FFFFFF;
				}

				.value {
					color: #FC6502;
				}

				&.w1 {
					flex: 0 0 57%;
				}

				&.w2 {
					flex: 0 0 43%;
				}
			}
		}


		.video {
			.videoList {
				height: 290rpx;
				background: #fff;
				position: relative;

				.left-back {
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 40rpx;
					height: 80rpx;
					background: rgba(52, 52, 52, .4);
					border-radius: 0px 10rpx 10rpx 0px;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.right-forword {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 40rpx;
					height: 80rpx;
					background: rgba(52, 52, 52, .4);
					border-radius: 10rpx 0px 0px 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.swiper {
					width: 100%;
					height: 100%;

					.imgtwo {
						display: flex;
						align-items: center;
						justify-content: center;
						overflow: hidden;
						position: relative;
						width: 100%;
						height: 100%;

						image {
							display: block;
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
						}
					}
				}
			}
		}



		.companyDes {
			.readMore {
				color: #FFFFFF !important;

				::v-deep .u-content {
					color: #FFFFFF !important;
				}
			}
		}

		.companyAddress {
			.addressInfo {

				.address {
					color: #fff;
					font-size: 28rpx;
				}

				.map {
					height: 229rpx;
					margin: 24rpx 0;
					position: relative;
					background: url('../static/img/detail/map2.png') no-repeat center center;
					background-size: 687rpx 229rpx;
					border-radius: 14rpx;
					overflow: hidden;

					.mapCenter {
						position: absolute;
						left: 50%;
						top: 52rpx;
						transform: translateX(-50%);

						.text {
							max-width: 440rpx;
							box-shadow: 0px 0px 27rpx 0px rgba(38, 109, 255, 0.1);
							background: #FFFFFF;
							border-radius: 80rpx;
							padding: 16rpx 30rpx;
							box-sizing: border-box;
							text-align: center;
						}

						.icon {
							background: green;
							width: 34rpx;
							height: 49rpx;
							margin: 12rpx auto 0;
							background: url('../static/img/detail/mapAddress.png');
							background-size: 34rpx 49rpx;
						}
					}
				}

				.distance {
					display: flex;
					justify-content: space-between;
					font-size: 26rpx;

					.leftText {
						color: #fff;
						padding-left: 26rpx;
						background: url('../static/img/detail/address2.png') no-repeat left center;
						background-size: 18rpx 23rpx;
					}

					.rightText {
						color: #7CA7FF;
						padding-right: 30rpx;
						background: url('../static/img/detail/guide2.png') no-repeat right center;
						background-size: 20rpx 22rpx;
					}
				}
			}
		}

		.companyImg2 {
			.imgList {
				display: flex;
				overflow-x: auto;

				.img {
					display: flex;
					align-items: center;
					justify-content: center;
					overflow: hidden;
					flex-shrink: 0;
					width: 256rpx;
					height: 180rpx;
					margin-right: 16rpx;
					border-radius: 10rpx;
					background: #fff;
				}
			}
		}
	}


	.jobPopup {
		/* #ifdef MP-TOUTIAO || MP-WEIXIN */
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 15;
		/* #endif */
		/* #ifdef MP-ALIPAY */
		position: initial;
		margin-top: 20rpx;
		/* #endif */
		height: 85vh;
		transition: all .5s;
		transform: translateY(90%);

		&.ac {
			transform: translateY(0) !important;
		}

		.expand {
			position: absolute;
			top: -20rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 102rpx;
			height: 22rpx;

			&.top {
				background: url('../static/img/detail/arrow-top.png') no-repeat center center /102rpx 22rpx;
			}

			&.bottom {
				background: url('../static/img/detail/arrow-bottom.png')no-repeat center center /102rpx 22rpx;
			}
		}

		.jobMask {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			/* #ifdef MP-TOUTIAO || MP-ALIPAY */
			height: 100vh;
			/* #endif */
			/* #ifdef MP-WEIXIN */
			height: 90vh;
			/* #endif */
			z-index: 5;
			transition: all .5s;
		}

		.main {
			border-radius: 14rpx 14rpx 0 0;
			height: 85vh;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 10;
			background: #F7F7F7;
		}

		.jobPopupTitle {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;

			.leftText {
				font-weight: 700;

				.color1 {
					color: #2A2A2A;
					font-size: 34rpx;
				}

				.color2 {
					color: #266DFF;
					font-size: 34rpx;
				}
			}

			.rigthText {
				color: #999999;
				font-size: 26rpx;
			}
		}

		.jobPopupList {
			// margin: 0 30rpx;
			padding-bottom: 30rpx;
		}
	}
</style>